<template>
	<view>
		<nav-custom></nav-custom>
		<swiper :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="item in bannerList">
				<view class="swiper-item" @click="handleBanner(item.link)">
					<image :src="item.img" mode="widthFix"></image>
				</view>
			</swiper-item>
			
		</swiper>
		<view class="goodsList">
			<goods-item v-for="(item, index) in goodsList" :key="item.id" :goodsInfo="item"></goods-item>
		</view>
		<navBottom/>
	</view>
</template>

<script>
	import navBottom from '../../components/nav-bottom.vue'
	import { getBannerList, getGoodsList } from '../../utils/index.js'
	export default {
		name: 'Home',
		data() {
			return {
				bannerList: [],
				goodsList: [],
				page: 0
			};
		},
		methods: {
			handleBanner(link) {
				uni.navigateTo({
					url: `./banner?link=${link}`
				})
			},
			async getGoods() {
				const res = await getGoodsList(this.page, `{"bcid": 1}`)
				uni.stopPullDownRefresh()
				let newList = res.results
				console.log('newList', newList)
				if(newList.length) {
					this.goodsList = [...this.goodsList, ...newList]
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
					return
				}
				console.log('this.goodsList', this.goodsList)
				this.page++
			}
		},
		components: {
			navBottom
		},
		onLoad() {
			getBannerList().then((res) => {
				this.bannerList = res.results
				console.log('bannerList',this.bannerList)
			})
			this.getGoods()
		},
		onReachBottom() {
			this.getGoods()
		},
		onPullDownRefresh() {
			this.goodsList = []
			this.page = 0
			this.getGoods()
		}
 	}
</script>

<style lang="scss">
	swiper{
		margin-top: 100upx;
		height: 1000upx;
		width: 100%;
		.swiper-item{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.goodsList{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 5px;
	}
</style>
